<template>
	<view class="bgw">
		<view class="u-flex">
			<view class="scroll-left-wrap">
				<scroll-view :scroll-y="true" class='scroll-box'>
					<template v-for="(v,i) in list" :key="v.house_tag_id">
						<view :class="['left-menu',leftMenuCurrent == i ?'active':'']" @click="leftMenuClick(i)">
							<view class="u-rela">
								{{v.house_tag_title}}
								<u-badge :is-dot="true" type="primary" v-if="menuActive[v.house_tag_id]"
									:offset="[0,20]"></u-badge>
							</view>
						</view>
					</template>
				</scroll-view>
			</view>
			<view class="u-flex-1">
				<scroll-view :scroll-y="true" class='scroll-box' :scroll-into-view="scrollIntoView" @scroll="rightScroll" @scrolltolower="rightScroltolower" lower-threshold='0'>
					<view :id="'scrollView_'+item.house_tag_id" v-for="(item,index) in list" :key="item.house_tag_id"
						class="scrollViewBox">
						<view class="u-p-l-20 u-p-r-20">
							{{item.house_tag_title}}
						</view>
						<view class="u-flex" v-if="item.search_type == 4">
							<u-field input-align="center" label-width="0"
								v-model="searchInputValue[item.filter_name][0]" placeholder="最低"
								type="number"></u-field>
							<view class="">
								至
							</view>
							<u-field input-align="center" label-width="0"
								v-model="searchInputValue[item.filter_name][1]" placeholder="最高"
								type="number"></u-field>
						</view>

						<view class="tag-list u-p-10">
							<u-row gutter="0">
								<template v-for="(v,i) in item.children" :key="v.house_tag_id">
									<u-col span="4">
										<view
											:class="[tagActive[item.house_tag_id] && tagActive[item.house_tag_id][v.house_tag_id]?'active':'','tag-item']"
											@click="tagClick(v,item)">{{v.house_tag_title}}</view>
									</u-col>
								</template>
							</u-row>
						</view>
					</view>

				</scroll-view>
			</view>
		</view>
		<view class="btn-wrap u-flex u-p-10">
			<view class="u-flex-1 u-p-10">
				<u-button type="default" @click="reset" class="btn-block btn-grey">重置</u-button>
			</view>
			<view class="u-flex-1 u-p-10">
				<u-button type="primary" @click="submit" class="btn-block">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import hook from './js/hook.js'; //需要引入store
	import {
		ref,
		reactive,
		computed,
		onMounted,
		getCurrentInstance,
		nextTick,
		watch,
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const emit = defineEmits(['submit', 'reset'])
	const props = defineProps({
		houseType: {
			type: [String, Number],
			default: '',
		},
		fenliId: {
			type: [String, Number],
			default: '',
		}
	})
	const {
		houseType,
		fenliId,
		list,
		tagActive,
		menuActive,
		searchValue,
		searchInputValue,
		setSubmit,
		setReset,
		tagClick,
		setTagActive,
		setValue
	} = hook();
	houseType.value = props.houseType;
	fenliId.value = props.fenliId;
	const leftMenuCurrent = ref(0);
	const scrollIntoView = ref('');
	const query = uni.createSelectorQuery().in(proxy);
	const rightScrollFlag = ref(true);
	const rightPosition = reactive([]);
	const leftMenuClick = (i) => {
		leftMenuCurrent.value = i
		scrollIntoView.value = 'scrollView_' + list.value[i].house_tag_id;
		rightScrollFlag.value = false;
		setTimeout(()=>{
			rightScrollFlag.value = true;
		},50)
	}
	const rightScroltolower = (e) =>{
		const lastIndex = rightPosition.length - 1;
		leftMenuCurrent.value = lastIndex;
	}
	const rightScroll = (e) => {
		if(rightPosition.length == 0){
			let top = -40;
			query.selectAll('.scrollViewBox').boundingClientRect(data => {
				data.forEach((item) => {
					rightPosition.push(top)
					top += item.height
				})
			}).exec();
		}
		if(!rightScrollFlag.value){
			return;
		}
		if(rightPosition.length == 0){
			return;
		}
		const scrollTop = e.detail.scrollTop;
		//右侧scroll-view滑到底时，左侧分类导航高亮显示最后一项
		const lastIndex = rightPosition.length - 1;
		if (scrollTop >= rightPosition[lastIndex]) {
			leftMenuCurrent.value = lastIndex;
		}else {
			for (var i = 0; i < lastIndex; i++) {
				if (scrollTop >= rightPosition[i] && scrollTop <= rightPosition[i + 1]) {
					leftMenuCurrent.value = i
					break;
				}
			}
		}

	}
	const reset = () => {
		let data = setReset();
		emit('reset', data)
	}
	const submit = () => {
		let data = setSubmit();
		emit('submit', data)
	}

	defineExpose({
		setValue
	})
</script>

<style lang="scss" scoped>
	.scroll-left-wrap {
		width: 212upx;
		background: #F8F8F8;
	}

	.left-menu {
		height: 80rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;

		&.active {
			background-color: #ffffff;
			color: #249CFF;
		}
	}

	.scroll-box {
		height: 600upx;
	}

	.btn-wrap {
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(231, 235, 238, 0.3);
	}

	.tag-item {
		height: 64rpx;
		background: #F6F6F6;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		line-height: 64upx;
		text-align: center;
		font-size: 24upx;
		margin: 10upx;

		&.active {
			background: #E2F2FF;
			color: #249CFF;
		}
	}
</style>